<template>
  <view class="layout">
    <view class="container">
      <image src="/static/images/top-bg.png" class="bg-image" />
      <info />
      <image
        src="/static/images/sport-banner.png"
        class="banner-image"
        @click="gotoSportAnalyze()"
      />
    </view>

    <today-overview />
    <today-sport-record />
  </view>
</template>

<script lang="ts" setup>
import { useThemeStore } from "@/store";
import { safeAreaInsets } from "@/utils/systemInfo";
import info from "./info.vue";
import todayOverview from "./todayOverview.vue";
import todaySportRecord from "./todaySportRecord.vue";

function gotoSportAnalyze() {
  uni.navigateTo({
    url: "/pages-sub/sportAnalyze/index",
  });
}
</script>

<style lang="scss" scoped>
.layout {
  width: 100vw;
  height: 100vh;
  background: #fafafa;
}
.container {
  position: relative;
  height: 275px;
  width: 100%;
}
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.banner-image {
  position: absolute;
  width: calc(100% - 20px);
  height: 60px;
  margin: 0 10px;
  z-index: 100;
}
</style>
